<!--
 * @Description: 登录弹窗
 * @Author: wrysunny
 * @Date: 2024-11-19 11:58:36
 * @LastEditor: wrysunny
 * @LastEditTime: 2024-11-23 15:02:36
-->
<template name="GlobalLoginDialog">
	<up-popup :show="store.loginState" mode="bottom" round="24rpx">
		<view class="p-[40rpx]">
			<u-image src="" width="84rpx" height="84rpx"></u-image>
			<view class="text-[32rpx] font-bold">欢迎加入xxxxx</view>
			<view class="text-[26rpx] text-[#555]">加入后享专属活动&会员好礼</view>
			<view class="mt-[32rpx]">
				<view class="btn bg-second text-white border-transparent" @click="login">授权登录</view>
				<view class="btn bg-white border-black mt-[20rpx]" @click="noLogin">暂时跳过</view>
			</view>
			<view class="mt-[16rpx] flex items-start">
				<view class="" @click="isCheck = !isCheck">
					<up-image :src="check" v-if="!isCheck" width="28rpx" height="28rpx"></up-image>
					<up-image :src="checked" v-else width="28rpx" height="28rpx"></up-image>
				</view>
				<view class="text-[22rpx] ml-[8rpx]">
					<text>允许我们在必要场景下，合理使用您的个人信息，且阅读并同意</text>
					<text class="text-second">《用户协议》</text>
					<text class="text-second">《隐私政策》</text>
					<text>等内容</text>
				</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
import { ref } from 'vue';
import useH5WxLogin from '@/hooks/useH5WxLogin';
import utils from '@/utils/utils';
import { useLoginStore } from '@/store/login';
import check from '@/static/check.png';
import checked from '@/static/checked.png';
const emit = defineEmits(['success']);
const store = useLoginStore();
// #ifdef H5
const { getWxCodeByH5 } = useH5WxLogin();
// #endif
const isCheck = ref(false);

/**
 * @description: 跳过登录
 * @return
 */
const noLogin = () => {
	store.loginState = false;
	utils.showToast('取消登录');
};

/**
 * @description: 登录
 * @return
 */
const login = async () => {
	if (!isCheck.value) {
		utils.showToast('请阅读并同意协议');
		return;
	}
	// #ifdef H5
	await getWxCodeByH5();
	// #endif
};
</script>

<style lang="scss" scoped>
.btn {
	@apply mx-auto w-[558rpx] h-[96rpx] leading-[92rpx] border rounded-full  text-[32rpx] text-center;
}
.circle {
	@apply w-[28rpx] h-[28rpx] border rounded-full shrink-0;
}
</style>
